<template>
  <div class="home">
    <h1>父组件直接获取子组件对象</h1>
    <p>获取到的子组件的数据：{{ a }}</p>
    <p>根据子组件的方法获取到的数据：{{ b }}</p>
    <Child1 ref="c1" />
    <h1>子组件直接获取父组件对象</h1>
    <Child2 ref="c2" />
    <h1>子组件直接获取根组件对象</h1>
    <Child3 ref="c2" />
  </div>
</template>

<script>
import Child1 from "@/components/Child1.vue"
import Child2 from "@/components/Child2.vue"
import Child3 from "@/components/Child3.vue"
export default {
  name: 'HomeView',
  components: {
    Child1, Child2, Child3
  },
  data(){
    return {
      a: "",
      b: 0,
      msg: "这是父组件的数据"
    }
  },
  mounted(){
    // 获取指定子组件对象（对象内的方法和属性等，都可被父组件使用）
    // console.log(this.$refs.c1);
    this.a = this.$refs.c1.msg;
    this.b = this.$refs.c1.random();
  },
  methods:{
    sayHi(){
      return "hi";
    }
  }
}
</script>
